<template>
  <el-card class="classify" shadow="never">
    <el-form :inline="true" :model="queryData" class="demo-form-inline">
      <el-form-item label="发布时间" prop="datelist">
          <el-date-picker
          v-model="queryData.datelist"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="getposttime"
          >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryData.typeid" filterable>
          <el-option v-for="item in type" :key="item.fid" :label="item.name" :value="item.fid" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button :loading="tableLoading" @click="queryHandler">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="tablebox" v-for="(item, index) in tableData" :key="index">
      <div class="tab_top">
        <div class="tab_item" style="margin-bottom:15px;">
        <span style="font-size:14px;font-weight: bold;"> 发布人：</span> 
        <span style="color: #606266;font-size:14px;">{{item.author}}</span>
        </div>
        <div class="tab_item" style="margin-bottom:15px;">
          <span style="font-size:14px;font-weight: bold;"> 帖子ID：</span>
          <span style="color: #606266;font-size:14px;">{{item.tid}}</span>
        </div>
        <!-- <div class="tab_item" style="margin-bottom:15px;">
          <span style="font-size:14px;font-weight: bold;"> IP：</span>
          <span style="color: #606266;font-size:14px;">{{item.ip}}</span>
        </div> -->
        <div class="tab_item" style="margin-bottom:15px;">
          <span style="font-size:14px;font-weight: bold;"> 板块：</span>
          <span style="color: #606266;font-size:14px;">{{item.fname}}</span>
        </div>
        <div class="tab_item">
          <span style="font-size:14px;font-weight: bold;"> 发布终端：</span>
          <span style="color: #606266;font-size:14px;">{{item.pubternimal == '0' ? '西蜀网APP' : '直播游仙'}}</span>
        </div>
        <div class="tab_item">
          <span style="font-size:14px;font-weight: bold;"> 发布时间：</span>
          <span style="color: #606266;font-size:14px;">{{item.dateline}}</span>
        </div>
      </div>
      <h5>主题内容：</h5>
      <div style="font-size:14px;line-height: 20px;">{{item.content}}</div>
      <h5>主题附件：</h5>
      <div class="imgbox" v-for="(vitem, vidx) in item.attach" :key="vidx">
        <div v-if="vitem.type === 1">
          <el-image  :src="vitem.url"  :preview-src-list="getImgList(item.attach)" class="img_i"></el-image>
        </div>
        <div class="imgbox" v-else>
          <div @click="videobtn(vitem.url)">
            <video :src="vitem.url" style="width:100px; height:100px"></video>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="视频" :visible.sync="dialogVisible">
      <div v-show="videomsg" class="v_box">
        <video :src="videomsg" controls autoplay preload="none">
        </video>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-pagination :total="pagination.total" :page-size="pagination.pageSize" @current-change="changeHandler" />
  </el-card>
</template>

<script>
import { GetList } from '../../api/rotation'
import Upload from '../../components/Upload'
export default {
  name: 'Mes',
  components: { Upload },
  data() {
    return {
      queryData: {
        datelist: [],
        starttime: '',
        endtime: '',
        typeid: 0
      },
      preview: '',
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      },
      videomsg: '',
      type: [],
      tableLoading: false,
      dialogVisible: false,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      }
    }
  },
  created() {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    var d = new Date(start) 
    d=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
    var e = new Date(end)
    e=e.getFullYear() + '-' + (e.getMonth() + 1) + '-' + e.getDate() + ' ' + e.getHours() + ':' + e.getMinutes() + ':' + e.getSeconds()
    this.queryData.datelist = [d, e]
    this.queryData.starttime = d
    this.queryData.endtime = e
    // this.rela = localStorage.getItem('drole')
    this._getTableData()
  },
  methods: {
    changeHandler(current) {
      this.pagination.currentPage = current
      this._getTableData()
    },
    queryHandler() {
      this.pagination.currentPage = 1
      this._getTableData()
    },
    // 修改状态
    _getTableData() {
      const { pagination, queryData } = this
      const { starttime, endtime, typeid } = queryData
      this.tableLoading = true
      GetList(pagination.currentPage, starttime, endtime, typeid).then(res => {
        const { list = [], pagination, type } = res || {}
        this.tableData = list
        pagination && (this.pagination = pagination)
        type && (this.type = type)
      }).finally(() => {
        this.tableLoading = false
      })
    },
    // 获取时间
    getposttime(val) {
      if (val) {
        this.queryData.starttime = val[0]
        this.queryData.endtime = val[1]
      }
    },
    videobtn (item) {
      this.videomsg = item
      // window.open(item)
      // window.location.href = item
      this.dialogVisible = true
    },
    getImgList(item) {
      let arr = []
      item.forEach((val) => {
        if (val.type === 1) {
          arr.push(val.url)
        }
      })
      return arr
    }
  }
}
</script>
<style>
.el-upload--picture-card {
    box-sizing: border-box;
    width: 80px !important;
    height: 80px !important;
    line-height: 79px !important;
}
.el-upload-list--picture-card .el-upload-list__item {
    width:80px;
    height: 80px;
    margin: 0 8px 8px 0;
}
.tablebox{
  padding: 15px;
  max-width: 1200px;
  box-sizing: border-box;
  border-bottom: 1px solid  #bfbfbf;
}
.tab_top{
  width: 800px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.tab_item{
  width: 260px;
}
.imgbox{
  width: 900px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.img_i{
  margin-right: 10px;
  width: 80px;
  height: 80px;
  background-size: cover;
}
.v_box{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
